<template>
    <el-dialog :close-on-click-modal="false" :title="'微信联系人关联'" :close-on-press-escape="false" :append-to-body="true" :visible="modalEdit" @opened="opened" @closed="closed" @close="modalEdit=false" width="1000px">
        <el-row>
            <el-col :span="18">
                <el-transfer v-loading="userLoading" filterable :titles="['微信联系人', '已选联系']" v-model="selectedUsers" :data="allUsers" :props="{'key':'id','label':'merName'}">
                    <el-input @keyup.enter.native="getUsers()" v-model="searchName" slot="left-footer" placeholder="输入手机号或者公司" size="small"></el-input>
                    <!-- <el-button class="transfer-footer" slot="right-footer" size="small">刷新</el-button> -->
                </el-transfer>
            </el-col>
        </el-row>
        <div slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="ok" :loading="loading">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import Constants from "@/utils/constants"
export default {
    name: 'PmPlan',
    data() {
        return {
            departmentId: null,
            userLoading: false,
            searchName: "",
            optProps: {
                children: "children",
                label: "name",
                value: "id",
                leaf: "leaf",
                emitPath: false
            },
            partmentLoading: false,
            departments: [],
            oldMerchants: [],
            allUsers: [],
            selectedUsers: [],
            loading: false,
            merchantId: null,
            modalEdit: false,

        };
    },
    mounted: function() {


    },
    methods: {

        setLeaf: function(item) {
            if (item.leaf) {
                this.$set(item, "children", undefined);
            } else {
                item.children.forEach(it => {
                    this.setLeaf(it);
                });
            }
        },
        getUsers: function() {
            var me = this;
            me.userLoading = true;
            me.$http.post("/sys/merchant/getAll.action", { name: me.searchName }).then(response => {
                me.userLoading = false;
                var body = response;
                if (body.status == 0) {

                    var dtt = body.obj.concat(
                        me.oldMerchants.filter(function(v) {
                            let dtf = true;
                            body.obj.forEach((ob, ind) => {
                                if (ob.id == v.id) {
                                    dtf = false;
                                }
                            });
                            return dtf;
                        }));

                    dtt.forEach((ob, ind) => {
                        me.$set(ob, "merName", ob.merName + "," + ob.phone + "," + ob.realName);
                    });
                    me.allUsers = dtt;

                }

            }, response => {
                me.userLoading = false;
            });
        },

        opened() {


            // this.getUsers();
        },
        closed() {
            this.selectedUsers = [];
            this.allUsers = [];
            this.oldMerchants=[];
        },
        showDialog(ids, merchantId) {

            this.selectedUsers = ids;
            this.merchantId = merchantId;
            this.modalEdit = true;
        },
        showDialog2(merchants, merchantId) {
            var me = this;
            me.oldMerchants = merchants;
            me.merchantId = merchantId;
            merchants.forEach((it, ind) => {
                me.selectedUsers.push(it.id);
            });
           
            me.allUsers = me.allUsers.concat(
                me.oldMerchants.filter(function(v) {
                    let dtf = true;
                    me.allUsers.forEach((ob, ind) => {
                        if (ob.id == v.id) {
                            dtf = false;
                        }
                    });
                    return dtf;
                }));

            me.modalEdit = true;
        },
        ok: function() {

            if (this.selectedUsers.length <= 0) {
                this.errorMessage("请先选择用户");
                return;
            }

            var me = this;
            me.loading = true;
            me.$http.post("/sys/customer/doBindUser.action", { customerId: me.merchantId, ids: this.selectedUsers.join(",") }).then(response => {
                me.loading = false;
                var body = response;
                if (body.status == 0) {
                    this.$emit("ok");
                    this.modalEdit = false;
                } else {
                    this.errorMessage(body.info);
                }

            }, response => {
                me.loading = false;
            });
            // let users=[];
            // this.allUsers.forEach(ite => {

            //     let ind=this.selectedUsers.indexOf(ite.id);
            //     if (ind!=-1) {
            //         users.push(ite);
            //     }
            // });



        },
        cancel: function() {
            this.modalEdit = false;
            this.$emit("cancel");
        }
    }
}
</script>
<style>
</style>